<template>
  <view class="product-con" id="product-con">
    
    <view class="navbar" :style="{ height: menuButtonHeight + 'px', opacity: opacity, paddingTop: statusBarHeight + 'px' }">
      <view class="navbarH">
        <view class="navbarCon acea-row row-center-wrapper" :style="{ paddingRight: navbarRight + 'px' }">
          <view class="header acea-row row-center-wrapper">
            <view class="item" :class="navActive === index ? 'on' : ''" v-for="(item, index) in navList" :key="index"
              @tap="tap(index)">
              {{ item }}
            </view>
          </view>
        </view>
      </view>
    </view>
      <!-- #ifdef MP -->
    <view
      id="home"
      class="home acea-row row-center-wrapper iconfont icon-xiangzuo"
      :class="opacity > 0.5 ? 'on' : ''"
      :style="{ top: homeTop + 'rpx' }"
      v-if="returnShow"
      @tap="returns"
    >
    </view>
   <!-- #endif -->
     <view>
      <scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation="true"
        :style="'height:' + height + 'px;'" @scroll="scroll" class="scroll-box">
        <view id="past0">
          <productConSwiper :imgUrls="sliderImage" :videoline="productInfo.videoLink" :indicatorDots="false"
            :userIndicatorDots="true">
          </productConSwiper>
          <view class="pad30 wrapper-box">
            <view class="wrapper mb30 borRadius14">
              <view class="share acea-row row-between row-bottom">
                <view class="money font-color">
                  <text class="num">{{ productInfo.price }}</text>
                  <text class="">元</text>
                 
                
                </view>
                <view class="share-icon" @click="listenerActionSheet">
                  <image class="icon-img" src="https://cshy.store/file/sysFile/wechart/share.png"></image>
                   <text>分享</text>
                </view>
              </view>
              <view class="introduce">{{ productInfo.storeName }}</view>
              <view class="label acea-row row-between-wrapper">
                <view>
                  销量:{{
                    Math.floor(productInfo.sales) +
                    Math.floor(productInfo.ficti) || 0
                  }}{{ productInfo.unitName || '' }}
                </view>
                <view>库存:{{ productInfo.stock || 0
                  }}{{ productInfo.unitName || '' }}</view>
                <view>收藏:{{ productInfo.collectNum }}</view>
              </view>
               <view v-if="coupon.list.length > 0 && type == 'normal'" class="coupon acea-row row-between-wrapper"
                @click="couponTap">
                <view class="hide line1 acea-row">
                  优惠券：
                  <view class="activity">
                    满{{ coupon.list[0].minPrice }}减{{
                      coupon.list[0].money
                    }}</view>
                </view>
                <view class="iconfont icon-jiantou"></view>
              </view>
              
            </view>
            <view class="attribute-box">
              <view class="attribute acea-row row-between-wrapper">
                <view class="line1">
                  <image class="icon-img" src="https://cshy.store/file/sysFile/wechart/shangpin.png"></image>
                  <text>商品编码：</text>
                  <text>{{ barcode }}</text>
                </view>
                <view class="copy-right" @click="copy">
                  <image class="icon-img" src="https://cshy.store/file/sysFile/wechart/copy.png"></image>
                  <text>复制</text>
                </view>
              </view>
              <view class="attribute acea-row row-between-wrapper">
                <view class="line1">
                  <image class="icon-img" src="https://cshy.store/file/sysFile/wechart/kuaidi.png"></image>
                  <text>快递：</text>
                  <text>{{ shippingTemplates.name }}</text>
                </view>
              </view>
              <view class="attribute acea-row row-between-wrapper">
                <view class="line1">
                  <image class="icon-img" src="https://cshy.store/file/sysFile/wechart/fuwu.png"></image>
                  <text>服务：</text>
                  <text>正品保障·专业配送·售后无忧</text>
                </view>
              </view>
              <view class="attribute acea-row row-between-wrapper  " @click="selecAttr">
                <view class="line1">
                  <image class="icon-img" src="https://cshy.store/file/sysFile/wechart/card.png"></image> <text>{{
                    attrTxt }}：</text>
                  <text>{{ attrValue }}</text>
                </view>
                <view class="iconfont icon-jiantou"></view>
              </view>
            </view>

            <!-- 优品推荐 -->
          </view>
        </view>
        <view class="userEvaluation" id="past1">
          <view class="title acea-row row-between-wrapper" :style="replyCount == 0
              ? 'border-bottom-left-radius:14rpx;border-bottom-right-radius:14rpx;'
              : ''
            ">
            <view>评价 ({{ replyCount }}) </view>
            <navigator class="praise" hover-class="none" :url="'/pages/users/goods_comment_list/index?productId=' + id">
              <!-- <i>好评</i>&nbsp;<text class="font-color"
                    >{{ replyChance || 0 }}%</text
                  > -->
              <text class="iconfont icon-jiantou"></text>
            </navigator>
          </view>
          <block v-if="replyCount">
            <userEvaluation :reply="reply"></userEvaluation>
          </block>
        </view>
        <view class="product-intro" id="past2">
          <view class="title">
            <view class="title-line"></view>
            <!-- <image src="https://cshy.store/file/sysFile/wechart/xzuo.png"></image> -->
            <span class="sp">商品详情</span>
            <view class="title-line"></view>
            <!-- <image src="https://cshy.store/file/sysFile/wechart/xyou.png"></image> -->
          </view>
          <view class="conter">
            <jyf-parser :html="description" ref="article" :tag-style="tagStyle"></jyf-parser>
          </view>
          <view class="product-remark-box">
            <view class="product-remark-header">商家声明</view>
            <view class="product-remark-row">
              <view class="product-remark-lable">·库存</view>
              <text
                class="product-remark-value">该商品供应商为平台供应商发货，库存由各地区的备货情况决定。如您购买的产品暂时还未发货，请您耐心等待，我们将按照下单顺序加急安排发货，给您带来的不便敬请谅解!</text>
            </view>
            <view class="product-remark-row">
              <view class="product-remark-lable">·价格</view>
              <text class="product-remark-value">该商品价格会定期更新，促销商品图片及价格信息仅供参考，请以实际下单为准！</text>
            </view>
            <view class="product-remark-row">
              <view class="product-remark-lable">·售后</view>
              <text class="product-remark-value">本商品由平台提供商品和物流服务，所有商品非质量问题概不支持7天无理由退换货，下单前请确认！</text>
            </view>
          </view>
          <!-- <rich-text :nodes="description" class="conter"></rich-text> -->
        </view>
        <view class="superior borRadius14" if="good_list.length" id="past3">
          <view class="title acea-row row-center-wrapper">
            <image class="title-line" src="https://cshy.store/file/sysFile/wechart//title-line.png"></image>
            <view class="titleTxt">看了又看</view>
            <!-- <image src="https://cshy.store/file/sysFile/wechart/xyou.png"></image> -->
          </view>
          <!-- <view class="slider-banner banner">
            <swiper
              indicator-dots="true"
              :autoplay="autoplay"
              :circular="circular"
              :interval="interval"
              :duration="duration"
              indicator-color="#999"
              indicator-active-color="#e93323"
              :style="'height:' + clientHeight + 'px'"
            >
              <swiper-item v-for="(item, indexw) in good_list" :key="indexw">
                <view class="list acea-row row-middle" :id="'list' + indexw">
                  <view
                    class="item"
                    v-for="(val, indexn) in item.list"
                    :key="indexn"
                    @click="goDetail(val)"
                  >
                    <view class="pictrue">
                      <image :src="val.image"></image>
                      <span
                        class="pictrue_log pictrue_log_class"
                        v-if="val.activityH5 && val.activityH5.type === '1'"
                        >秒杀</span
                      >
                      <span
                        class="pictrue_log pictrue_log_class"
                        v-if="val.activityH5 && val.activityH5.type === '2'"
                        >砍价</span
                      >
                      <span
                        class="pictrue_log pictrue_log_class"
                        v-if="val.activityH5 && val.activityH5.type === '3'"
                        >拼团</span
                      >
                    </view>
                    <view class="name line1">{{ val.storeName }}</view>
                    <view class="money font-color">¥{{ val.price }}</view>
                  </view>
                </view>
              </swiper-item>
            
            </swiper>
          </view> -->
          <productGrid :iSshowH="iSshowH" @goDetail="goDetail" :loading="loading" :goodScroll="goodScroll"
            :tempArr="good_list"></productGrid>
        </view>

        <view style="height: 120rpx"></view>
      </scroll-view>
    </view>
    <view class="footer acea-row row-between-wrapper">


      <view class="item" @click="kefuClick">
        <image class="icon-img" src="https://cshy.store/file/sysFile/wechart/kefu.png"></image>
        <view>客服</view>
      </view>

      <block v-if="type === 'normal'">
        <view @click="setCollect" class="item">

          <image class="icon-img" src="https://cshy.store/file/sysFile/wechart/shoucang-active.png" v-if="userCollect">
          </image>
          <image class="icon-img" src="https://cshy.store/file/sysFile/wechart/shoucang.png" v-else></image>
          <view>收藏</view>
        </view>
        <navigator open-type="switchTab" class="animated item" :class="animated == true ? 'bounceIn' : ''"
          url="/pages/order_addcart/order_addcart" hover-class="none">

          <view class="footer-btn-cart">

            <text v-if="Math.floor(CartCount) > 0" class="num bg-color">{{
              CartCount
              }}</text>
            <image class="icon-img" src="https://cshy.store/file/sysFile/wechart/gouwuche.png"></image>
            <view>购物车</view>
          </view>

        </navigator>
        <view class="bnt acea-row" v-if="attr.productSelect.stock <= 0">
          <form @submit="joinCart" report-submit="true">
            <button class="joinCart bnts" form-type="submit">加入购物车</button>
          </form>
          <form report-submit="true">
            <button class="buy bnts bg-color-hui" form-type="submit">
              已售罄
            </button>
          </form>
        </view>
        <view class="bnt acea-row" v-else>
          <form @submit="joinCart" report-submit="true">
            <button class="joinCart bnts" form-type="submit">加入购物车</button>
          </form>
          <form @submit="goBuy" report-submit="true" v-if='!isOpen'>
            <button class="buy bnts" form-type="submit">立即购买</button>
          </form>
          <form @submit="goBuy" report-submit="true" v-else> 
            <button class="buy bnts" form-type="submit">立即支付</button>
          </form>
        </view>
      </block>
      <view class="bnt bntVideo acea-row" v-if="attr.productSelect.stock <= 0 && type === 'video'">
        <form report-submit="true">
          <button class="buy bnts bg-color-hui" form-type="submit">
            已售罄
          </button>
        </form>
      </view>
      <view class="bnt bntVideo acea-row" v-if="attr.productSelect.stock > 0 && type === 'video'">
        <form @submit="goBuy" report-submit="true">
          <button class="buy bnts" form-type="submit">立即购买</button>
        </form>
      </view>
    </view>
    <!-- <shareRedPackets
      :sharePacket="sharePacket"
      @listenerActionSheet="listenerActionSheet"
      @closeChange="closeChange"
    ></shareRedPackets> -->
    <!-- 组件 -->
    <productWindow :isShowAddNumber="true"  :attr="attr" :isShow="1" :iSplus="1" :isShowPrice="true" :productInfo="productInfo"
      :isShowInventory="true" @myevent="onMyEvent" @ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNum"
      @attrVal="attrVal" @iptCartNum="iptCartNum" id="product-window">
    </productWindow>
    <home></home>
    <couponListWindow :coupon="coupon" @ChangCouponsClone="ChangCouponsClone" @ChangCoupons="ChangCoupons"
      @ChangCouponsUseState="ChangCouponsUseState" @tabCouponType="tabCouponType"></couponListWindow>
    <!-- 分享按钮 -->
    <view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
      <!-- #ifndef MP -->
      <button class="item" hover-class="none" v-if="weixinStatus === true" @click="H5ShareBox = true">
        <view class="iconfont icon-weixin3"></view>
        <view class="">发送给朋友</view>
      </button>
      <!-- #endif -->
      <!-- #ifdef MP -->
      <button class="item" open-type="share" hover-class="none" @click="goFriend">
        <view class="iconfont icon-weixin3"></view>
        <view class="">发送给朋友</view>
      </button>
      <!-- #endif -->
      <!-- <button class="item" hover-class="none" @click="goPoster">
        <view class="iconfont icon-haibao"></view>
        <view class="">生成海报</view>
      </button> -->
    </view>
    <view class="mask" v-if="posters" @click="closePosters"></view>
    <view class="mask" v-if="canvasStatus"></view>

    <!-- 海报展示 -->
    <view class="poster-pop" v-if="canvasStatus">
      <image src="https://cshy.store/file/sysFile/wechart/poster-close.png" class="close" @click="posterImageClose">
      </image>
      <image :src="imagePath"></image>
      <!-- #ifndef H5  -->
      <view class="save-poster" @click="savePosterPath">保存到手机</view>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="keep">长按图片可以保存到手机</view>
      <!-- #endif -->
    </view>
    <view class="canvas" v-else>
      <canvas style="width: 750px; height: 1190px" canvas-id="firstCanvas"></canvas>
      <canvas canvas-id="qrcode" :style="{ width: `${qrcodeSize}px`, height: `${qrcodeSize}px` }" />
    </view>
    <!-- 发送给朋友图片 -->
    <view class="share-box" v-if="H5ShareBox">
      <image src="https://cshy.store/file/sysFile/wechart/share-info.png" @click="H5ShareBox = false"></image>
    </view>
  </view>
</template>

<script>
import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
// import yzf_chat from '@/plugin/chat/yzf_chat.js'
import store from '@/store'
import {
  getProductDetail,
  collectAdd,
  collectDel,
  postCartAdd,
  getReplyList,
  getReplyConfig,
  getProductGood,
  getReplyProduct,
} from '@/api/store.js'
import { spread } from '@/api/user'
import { getCoupons } from '@/api/api.js'
import { getCartCounts } from '@/api/order.js'
import { toLogin } from '@/libs/login.js'
import { computeUser } from '@/api/user.js'
import { mapGetters } from 'vuex'
import { imageBase64 } from '@/api/public'
import productConSwiper from '@/components/productConSwiper'
import couponListWindow from '@/components/couponListWindow'
import productWindow from '@/components/productWindow'
import userEvaluation from '@/components/userEvaluation'
import shareRedPackets from '@/components/shareRedPackets'
import home from '@/components/home'
import { silenceBindingSpread } from '@/utils'
import parser from '@/components/jyf-parser/jyf-parser'
// #ifdef MP
import { base64src } from '@/utils/base64src.js'

import { getQrcode } from '@/api/api.js'
// #endif
import productGrid from '@/components/productGrid.vue'
let app = getApp()
export default {
  components: {
    productConSwiper,
    couponListWindow,
    productWindow,
    userEvaluation,
    shareRedPackets,
    home,
    'jyf-parser': parser,

    productGrid,
  },
  data() {
    let that = this
    return {
      //属性是否打开
      coupon: {
        coupon: false,
        type: 1,
        list: [],
        count: [],
      },
      attrTxt: '请选择', //属性页面提示
      attrValue: '', //已选属性
      animated: false, //购物车动画
      id: 0, //商品id
      replyCount: 0, //总评论数量
      reply: [], //评论列表
      productInfo: {}, //商品详情
      productValue: [], //系统属性
      couponList: [], //优惠券
      cart_num: 1, //购买数量
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false, //是否隐藏授权
      isOpen: false, //是否打开属性组件
      actionSheetHidden: true,
      storeImage: '', //海报产品图
      PromotionCode: '', //二维码图片
      posterbackgd: 'https://cshy.store/file/sysFile/wechart/posterbackgd.png',
      sharePacket: {
        isState: true, //默认不显示
      }, //分销商详细
      // uid: 0, //用户uid
      circular: false,
      autoplay: false,
      interval: 3000,
      duration: 500,
      clientHeight: '',
      systemStore: {}, //门店信息
      good_list: [],
      replyChance: 0,
      CartCount: 0,
      isDown: true,
      posters: false,
      weixinStatus: false,
      attr: {
        cartAttr: false,
        productAttr: [],
        productSelect: {},
      },
      description: '',
      navActive: 0,
      H5ShareBox: false, //公众号分享图片
      activityH5: [],
      retunTop: true, //顶部返回
      navH: '',
      navList: [],
      opacity: 0,
      scrollY: 0,
      topArr: [],
      toView: '',
      height: 0,
      heightArr: [],
      lock: false,
      scrollTop: 0,
      tagStyle: {
        img: 'width:100%;display:block;',
        table: 'width:100%',
        video: 'width:100%',
      },
      sliderImage: [],
      qrcodeSize: 600,
      canvasStatus: false, //是否显示海报
      imagePath: '', //海报路径
      imgTop: '',
      errT: '',
      homeTop: 20,
      navbarRight: 0,
      userCollect: false,
      returnShow: true, //判断顶部返回是否出现
      type: '', //视频号普通商品类型
      loading: false,
      goodScroll: false,
      iSshowH: false,
      shippingTemplates: { name: null },
      statusBarHeight: null,
      menuButtonHeight: null,
      menuButtonInfo: null,
      isDeliver:null,
      isPickup:null,
      barcode:null    }
  },
  computed: mapGetters(['isLogin', 'uid', 'chatUrl']),
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        let that = this
        if (newV == true) {
          that.getCouponList()
          that.getCartCount()
          //that.downloadFilePromotionCode();
        }
      },
      deep: true,
    },
    productInfo: {
      handler: function () {
        this.$nextTick(() => { })
      },
      immediate: true,
    },
  },
  created() {

  },
  onShow() {

this.isOpen=false
  },
  onLaunch() {

  },
  onLoad(options) {
    let that = this
    var pages = getCurrentPages()
    that.returnShow = pages.length === 1 ? false : true
    if (pages.length <= 1) {
      that.retunTop = false
    }

    that.navH = app.globalData.navHeight
  // #ifdef MP
    this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();

    this.menuButtonHeight = this.menuButtonInfo.height + this.menuButtonInfo.top
    uni.getSystemInfo({
      success: (res) => {
        // 获取手机顶部状态栏的高度
        this.statusBarHeight = res.statusBarHeight || 0

      }
    })
      // #endif
    // #ifdef H5
    computeUser()
    // #endif
    // #ifdef MP || APP-PLUS
    // 小程序链接进入获取绑定关系id
    setTimeout(() => {
      if (options.spread) {
        app.globalData.spread = options.spread
        spread(options.spread).then((res) => { })
      }
    }, 2000)
    // #endif
    uni.getSystemInfo({
      success: function (res) {
        that.height = res.windowHeight
      },
    })
    if (!options.scene && !options.id) {
      this.showSkeleton = false
      this.$util.Tips(
        {
          title: '缺少参数无法查看商品',
        },
        {
          url: '/pages/index/index',
        }
      )
      return
    }
    if (options.hasOwnProperty('id') || options.scene) {
      if (options.scene) {
        // 仅仅小程序扫码进入
        let qrCodeValue = that.$util.getUrlParams(
          decodeURIComponent(options.scene)
        )
        let mapeMpQrCodeValue = that.$util.formatMpQrCodeData(qrCodeValue)
        app.globalData.spread = mapeMpQrCodeValue.spread
        this.id = mapeMpQrCodeValue.id
        setTimeout(() => {
          spread(mapeMpQrCodeValue.spread)
            .then((res) => { })
            .catch((res) => { })
        }, 2000)
      } else {
        this.id = options.id
      }
      options.type == undefined || options.type == null
        ? (that.type = 'normal')
        : (that.type = options.type)
      that.$store.commit('PRODUCT_TYPE', that.type)
    }
    this.getGoodsDetails()
    this.getCouponList()
    this.getProductReplyList()
    this.getProductReplyCount()
    this.getGoods()
  },
  onReady() {
    this.$nextTick(function () {
      // #ifdef MP
      const menuButton = uni.getMenuButtonBoundingClientRect()
      const query = uni.createSelectorQuery().in(this)
      query
        .select('#home')
        .boundingClientRect((data) => {
          this.homeTop = menuButton.top * 2 + menuButton.height - data.height
        })
        .exec()
      // #endif
       
    })
  },
  show() { },
  /**
   * 用户点击右上角分享
   */
  // #ifdef MP
  onShareAppMessage: function () {
    let that = this
    that.$set(that, 'actionSheetHidden', !that.actionSheetHidden)
    return {
      title: that.productInfo.storeName || '',
      imageUrl: that.productInfo.image || '',
      path: '/pages/goods/goods_details/index?id=' + that.id + '&spread=' + that.uid,
    }
  },
  // #endif
  methods: {
    copy(){
     

      uni.setClipboardData({
        data:this.barcode ,
        success: () => {
          this.$util.Tips({
            title: '复制成功',
          })
        },
      })
    },
    goDetail(item) { },
    getChat(uid) {
      window.yzf &&
        window.yzf.init({
          sign: '37ef9b97872756ce2a1596ec4fe9b66b0b4cbeec7b36239a65924fa6cbd5c29ac6b013c274511b2eee929e72312baeeeb97aae86',
          token: '', //非必填
          userAvator: '', //非必填，用户头像
          userNick: '', //非必填，用户昵称
          uid: uid, //用户唯一标识，如果没有则不填写，默认为空,（字符串格式）
          title: '', //非必填，如果未填写，默认获取配置标题
          isRMB: '', //商品是否显示人民币￥,默认显示，false不显示
          data: {
            c1: '',
            c2: '',
            c3: '',
            c4: '',
            c5: '',
          },
          selector: 'chat-btn',
          callback: function (type, data) { },
        })
    },
    kefuClick() {
      this.$util.makePhoneCall()
    },
    closeChange: function () {
      this.$set(this.sharePacket, 'isState', true)
    },
    goActivity: function (e) {
      let item = e
      if (item.type === '1') {
        uni.navigateTo({
          url: `/pages/activity/goods_seckill_details/index?id=${item.id}`,
        })
      } else if (item.type === '2') {
        uni.navigateTo({
          url: `/pages/activity/goods_bargain_details/index?id=${item.id}&startBargainUid=${this.uid}`,
        })
      } else {
        uni.navigateTo({
          url: `/pages/activity/goods_combination_details/index?id=${item.id}`,
        })
      }
    },
    /**
     * 购物车手动填写
     *
     */
    iptCartNum: function (e) {
      this.$set(this.attr.productSelect, 'cart_num', e ? e : 1)
    },
    // 后退
    returns: function () {
      uni.navigateBack()
    },
    tap(index) {
      var id = '#past' + index
      var index = index
      var that = this
      this.toView = id
      this.navActive = index
      this.lock = true
      this.scrollTop = index > 0 ? that.topArr[index] - this.menuButtonInfo.height / 2
        : that.topArr[index]

    },
    scroll: function (e) {
      var that = this,
        scrollY = e.detail.scrollTop
      var opacity = scrollY / 200
      opacity = opacity > 1 ? 1 : opacity
      that.$set(that, 'opacity', opacity)
      that.$set(that, 'scrollY', scrollY)
      if (that.lock) {
        that.$set(that, 'lock', false)
        return
      }
      for (var i = 0; i < that.topArr.length; i++) {
        if (
          scrollY <
          that.topArr[i] - app.globalData.navHeight / 2 + that.heightArr[i]
        ) {
          that.$set(that, 'navActive', i)
          break
        }
      }
    },
    /*
     *去商品详情页
     */
    goDetail(item) {
      if (!item.activityH5) {
        uni.redirectTo({
          url: '/pages/goods/goods_details/index?id=' + item.id,
        })
        return
      }
      if (item.activityH5.length == 0) {
        uni.redirectTo({
          url: '/pages/goods/goods_details/index?id=' + item.id,
        })
        return
      }
      // 砍价
      if (item.activityH5 && item.activityH5.type == 2) {
        uni.redirectTo({
          url: `/pages/activity/goods_bargain_details/index?id=${item.activityH5.id}&bargain=${this.uid}`,
        })
        return
      }
      // 拼团
      if (item.activityH5 && item.activityH5.type == 3) {
        uni.redirectTo({
          url: `/pages/activity/goods_combination_details/index?id=${item.activityH5.id}`,
        })
        return
      }
      // 秒杀
      if (item.activityH5 && item.activityH5.type == 1) {

        uni.redirectTo({
          url: `/pages/activity/goods_seckill_details/index?id=${item.activityH5.id}`,
        })
        return
      }
    },
    // 微信登录回调
    onLoadFun: function (e) {
      this.getCouponList()
      this.getCartCount()
    },
    ChangCouponsClone: function () {
      this.$set(this.coupon, 'coupon', false)
    },
    /**
     * 购物车数量加和数量减
     *
     */
    ChangeCartNum: function (changeValue) {
      //changeValue:是否 加|减
      //获取当前变动属性
      let productSelect = this.productValue[this.attrValue]
      //如果没有属性,赋值给商品默认库存
      if (productSelect === undefined && !this.attr.productAttr.length)
        productSelect = this.attr.productSelect
      //无属性值即库存为0；不存在加减；
      if (productSelect === undefined) return
      let stock = productSelect.stock || 0
      let num = this.attr.productSelect
      if (changeValue) {
        num.cart_num++
        if (num.cart_num > stock) {
          this.$set(this.attr.productSelect, 'cart_num', stock)
          this.$set(this, 'cart_num', stock)
        }
      } else {
        num.cart_num--
        if (num.cart_num < 1) {
          this.$set(this.attr.productSelect, 'cart_num', 1)
          this.$set(this, 'cart_num', 1)
        }
      }
    },
    attrVal(val) {
      this.$set(
        this.attr.productAttr[val.indexw],
        'index',
        this.attr.productAttr[val.indexw].attrValues[val.indexn]
      )
    },
    /**
     * 属性变动赋值
     *
     */
    ChangeAttr: function (res) {
      let productSelect = this.productValue[res]
      if (productSelect) {
        this.$set(this.attr.productSelect, 'image', productSelect.image)
        this.$set(this.attr.productSelect, 'price', productSelect.price)
        this.$set(this.attr.productSelect, 'stock', productSelect.stock)
        this.$set(this.attr.productSelect, 'otPrice', productSelect.otPrice)
        this.$set(this.attr.productSelect, 'unique', productSelect.id)
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', res)
        this.$set(this, 'attrTxt', '已选择')
      } else {
        this.$set(this.attr.productSelect, 'image', this.productInfo.image)
        this.$set(this.attr.productSelect, 'price', this.productInfo.price)
        this.$set(this.attr.productSelect, 'otPrice', this.productInfo.otPrice)
        this.$set(this.attr.productSelect, 'stock', 0)
        this.$set(this.attr.productSelect, 'unique', this.productInfo.id)
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', '')
        this.$set(this, 'attrTxt', '请选择')
      }
    },
    /**
     * 领取完毕移除当前页面领取过的优惠券展示
     */
    ChangCoupons: function (e) {
      let coupon = e
      let couponList = this.$util.ArrayRemove(this.couponList, 'id', coupon.id)
      this.$set(this, 'couponList', couponList)
      this.getCouponList()
    },

    setClientHeight: function () {
      let that = this
      if (!that.good_list.length) return
      let view = uni.createSelectorQuery().in(this).select('#list0')
      view
        .fields(
          {
            size: true,
          },
          (data) => {
            // that.$set(that, 'clientHeight', data.height + 20)
          }
        )
        .exec()
    },
    /**
     * 优品推荐
     *
     */
    getGoods() {
      getProductGood().then((res) => {
        let good_list = res.data.list || []
        this.iSshowH = false
        this.loading = false
        this.goodScroll = true
        // let count = Math.ceil(good_list.length / 6)
        // let goodArray = new Array()
        // for (let i = 0; i < count; i++) {
        //   let list = good_list.slice(i * 6, i * 6 + 6)
        //   if (list.length)
        //     goodArray.push({
        //       list: list,
        //     })
        // }
        this.$set(this, 'good_list', good_list)
        let navList = ['宝贝', '评价', '详情', '推荐']

        this.$set(this, 'navList', navList)

        this.$nextTick(() => {
          if (good_list.length) {
            this.setClientHeight()
          }
        })
      })
    },
    /**
     * 获取产品详情
     *
     */
    getGoodsDetails: function () {
      let that = this
      uni.showLoading({
        title: '加载中',
      })
      getProductDetail(that.id, that.type)
        .then((res) => {
          let productInfo = res.data.productInfo
          this.isDeliver=productInfo.isDeliver
          this.isPickup=productInfo.isPickup
          // 字符串数组转数组；
          let arrayImg = productInfo.sliderImage
          let sliderImage = JSON.parse(arrayImg)
          that.$set(that, 'sliderImage', sliderImage)
          that.$set(that, 'productInfo', productInfo)
          that.$set(that, 'description', productInfo.content)
          that.$set(that, 'userCollect', res.data.userCollect)
          that.$set(that.attr, 'productAttr', res.data.productAttr)
          that.$set(that, 'productValue', res.data.productValue)
         
          that.barcode= res.data.productValue[Object.keys(res.data.productValue)[0]].barCode
          that.$set(that.sharePacket, 'priceName', res.data.priceName)
          that.shippingTemplates = res.data.shippingTemplates

          that.$set(
            that.sharePacket,
            'isState',
            Math.floor(res.data.priceName) != 0 ? false : true
          )
          that.$set(
            that,
            'activityH5',
            res.data.activityAllH5 ? res.data.activityAllH5 : []
          )
          uni.setNavigationBarTitle({
            title: productInfo.storeName.substring(0, 7) + '...',
          })
          let productAttr = this.attr.productAttr.map((item) => {
            return {
              attrName: item.attrName,
              attrValues: item.attrValues.split(','),
              id: item.id,
              isDel: item.isDel,
              productId: item.productId,
              type: item.type,
              otPrice: item.otPrice

            }
          })
          this.$set(this.attr, 'productAttr', productAttr)
          if (that.isLogin) {
            that.getCartCount()
            //#ifdef H5
            that.make(that.uid)
            that.ShareInfo()
            this.getImageBase64(this.productInfo.image)
            // #endif
            // #ifdef MP
            // that.getQrcode()
            // #endif
          }
          setTimeout(function () {
            that.infoScroll()
          }, 500)
          // #ifdef MP
          that.imgTop = res.data.productInfo.image
          // #endif
          // #ifndef H5
          that.downloadFilestoreImage()
          // #endif
          that.DefaultSelect()
        })
        .catch((err) => {
          //状态异常返回上级页面
          return that.$util.Tips(
            {
              title: err.toString(),
            },
            {
              tab: 3,
              url: 1,
            }
          )
        }).finally(() => {
          uni.hideLoading()
        })
    },
    getProductReplyList: function () {
      getReplyProduct(this.id).then((res) => {
        this.reply = res.data.productReply ? [res.data.productReply] : []
      })
    },
    getProductReplyCount: function () {
      let that = this
      getReplyConfig(that.id).then((res) => {
        that.$set(that, 'replyChance', res.data.replyChance * 100)
        that.$set(that, 'replyCount', res.data.sumCount)
      })
    },
    infoScroll: function () {
      var that = this,
        topArr = [],
        heightArr = []
      for (var i = 0; i < that.navList.length; i++) {
        //productList
        //获取元素所在位置
        var query = uni.createSelectorQuery().in(this)
        var idView = '#past' + i
        // if (!that.data.good_list.length && i == 2) {
        //   var idView = "#past" + 3;
        // }
        query.select(idView).boundingClientRect()
        query.exec(function (res) {
          var top = res[0].top
          var height = res[0].height
          topArr.push(top)
          heightArr.push(height)
          that.$set(that, 'topArr', topArr)
          that.$set(that, 'heightArr', heightArr)
        })
      }
      console.log(that.topArr)
      console.log(that.heightArr)
      
    },
    /**
     * 拨打电话
     */
    makePhone: function () {
      this.$util.makePhoneCall()
    },
    /**
     * 打开地图
     *
     */
    showMaoLocation: function () {
      if (!this.systemStore.latitude || !this.systemStore.longitude)
        return this.$util.Tips({
          title: '缺少经纬度信息无法查看地图！',
        })
      uni.openLocation({
        latitude: parseFloat(this.systemStore.latitude),
        longitude: parseFloat(this.systemStore.longitude),
        scale: 8,
        name: this.systemStore.name,
        address: this.systemStore.address + this.systemStore.detailed_address,
        success: function () { },
      })
    },
    /**
     * 默认选中属性
     *
     */
    DefaultSelect: function () {
      let productAttr = this.attr.productAttr
      let value = []
      for (let key in this.productValue) {
        if (this.productValue[key].stock > 0) {
          value = this.attr.productAttr.length ? key.split(',') : []
          break
        }
      }
      for (let i = 0; i < productAttr.length; i++) {
        this.$set(productAttr[i], 'index', value[i])
      }
      //sort();排序函数:数字-英文-汉字；
      let productSelect = this.productValue[value.join(',')]

      if (productSelect && productAttr.length) {
        this.$set(
          this.attr.productSelect,
          'storeName',
          this.productInfo.storeName
        )
        this.$set(this.attr.productSelect, 'image', productSelect.image)
        this.$set(this.attr.productSelect, 'price', productSelect.price)
        this.$set(this.attr.productSelect, 'otPrice', productSelect.otPrice)
        this.$set(this.attr.productSelect, 'stock', productSelect.stock)
        this.$set(this.attr.productSelect, 'unique', productSelect.id)
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', value.join(','))
        this.$set(this, 'attrTxt', '已选择')
      } else if (!productSelect && productAttr.length) {
        this.$set(
          this.attr.productSelect,
          'storeName',
          this.productInfo.storeName
        )
        this.$set(this.attr.productSelect, 'image', this.productInfo.image)
        this.$set(this.attr.productSelect, 'price', this.productInfo.price)
        this.$set(this.attr.productSelect, 'otPrice', this.productInfo.otPrice)
        this.$set(this.attr.productSelect, 'stock', 0)
        this.$set(this.attr.productSelect, 'unique', this.productInfo.id)
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', '')
        this.$set(this, 'attrTxt', '请选择')
      } else if (!productSelect && !productAttr.length) {
        this.$set(
          this.attr.productSelect,
          'storeName',
          this.productInfo.storeName
        )
        this.$set(this.attr.productSelect, 'image', this.productInfo.image)
        this.$set(this.attr.productSelect, 'price', this.productInfo.price)
        this.$set(this.attr.productSelect, 'otPrice', this.productInfo.otPrice)
        this.$set(this.attr.productSelect, 'stock', this.productInfo.stock)

        this.$set(this.attr.productSelect, 'unique', this.productInfo.id || '')
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', '')
        this.$set(this, 'attrTxt', '请选择')
      }
    },
    /**
     * 获取优惠券
     *
     */
    getCouponList(type) {
      let that = this,
        obj = {
          page: 1,
          limit: 20,
          productId: that.id,
          type: type,
        }
      if (type != undefined || type != null) {
        obj.type = type
      } else {
        obj.type = ''
      }
      getCoupons(obj).then((res) => {
        that.$set(that.coupon, 'list', res.data)
      })
    },
    tabCouponType(type) {
      this.$set(this.coupon, 'type', type)
      this.getCouponList(type)
    },

    ChangCouponsUseState(index) {
      let that = this
      that.coupon.list[index].isUse = true
      that.$set(that.coupon, 'list', that.coupon.list)
      that.$set(that.coupon, 'coupon', false)
    },
    /**
     *
     *
     * 收藏商品
     */
    setCollect: function () {
      let that = this
      if (this.isLogin === false) {
        toLogin()
      } else {
        if (this.userCollect) {
          collectDel(this.productInfo.id).then((res) => {
            that.$set(that, 'userCollect', !that.userCollect)
          })
        } else {
          collectAdd(this.productInfo.id).then((res) => {
            that.$set(that, 'userCollect', !that.userCollect)
          })
        }
      }
    },
    /**
     * 打开属性插件
     */
    selecAttr: function () {
      this.$set(this.attr, 'cartAttr', true)
      this.$set(this, 'isOpen', true)
    },
    /**
     * 打开优惠券插件
     */
    couponTap: function () {
      let that = this
      if (that.isLogin === false) {
        toLogin()
      } else {
        that.getCouponList(1)
        that.$set(that.coupon, 'coupon', true)
      }
    },
    onMyEvent: function () {
      this.$set(this.attr, 'cartAttr', false)
      this.$set(this, 'isOpen', false)
    },
    /**
     * 打开属性加入购物车
     *
     */
    joinCart: function (e) {
      //是否登录
      if (this.isLogin === false) {
        toLogin()
      } else {
        this.goCat(1)
      }
    },
    /*
     * 加入购物车
     */
    goCat: function (num) {
      let that = this,
        productSelect = that.productValue[this.attrValue]

      //打开属性
      if (that.attrValue) {
        //默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
        that.attr.cartAttr = !that.isOpen ? true : false
      } else {
        if (that.isOpen) that.attr.cartAttr = true
        else that.attr.cartAttr = !that.attr.cartAttr
      }
      //只有关闭属性弹窗时进行加入购物车
      if (that.attr.cartAttr === true && that.isOpen === false)
        return (that.isOpen = true)
      //如果有属性,没有选择,提示用户选择
      if (
        that.attr.productAttr.length &&
        productSelect.stock === 0 &&
        that.isOpen === true
      )
        return that.$util.Tips({
          title: '产品库存不足，请选择其它',
        })
      if (num === 1) {
        let q = {
          productId: parseFloat(that.id),
          cartNum: parseFloat(that.attr.productSelect.cart_num),
          isNew: false,
          productAttrUnique:
            that.attr.productSelect !== undefined
              ? that.attr.productSelect.unique
              : that.productInfo.id,
        }
        postCartAdd(q)
          .then(function (res) {
            that.isOpen = false
            that.attr.cartAttr = false
            that.$util.Tips({
              title: '添加购物车成功',
              success: () => {
                that.getCartCount(true)
              },
            })
          })
          .catch((res) => {
            that.isOpen = false
            return that.$util.Tips({
              title: res,
            })
          })
      } else {
        this.getPreOrder()
      }
    },
    /**
     * 获取购物车数量
     * @param boolean 是否展示购物车动画和重置属性
     */
    getCartCount: function (isAnima) {
      let that = this
      const isLogin = that.isLogin
      if (isLogin) {
        getCartCounts(true, 'total').then((res) => {
          that.CartCount = res.data.count
          console.log(that.CartCount)
          //加入购物车后重置属性
          if (isAnima) {
            that.animated = true
            setTimeout(function () {
              that.animated = false
            }, 500)
          }
        })
      }
    },
    /**
     * 立即购买
     */
    goBuy: function (e) {
      if (this.isLogin === false) {
        toLogin()
      } else {
        this.goCat(0)
      }
    },
    /**
     * 预下单
     */
    getPreOrder: function () {

      this.$Order.getPreOrder(this.type === 'normal' ? 'buyNow' : 'video', [
        {
          attrValueId: parseFloat(this.attr.productSelect.unique),
          productId: parseFloat(this.id),
          productNum: parseFloat(this.attr.productSelect.cart_num),
          isDeliver:this.isDeliver,
      isPickup:this.isPickup
        },
      ])
    },
    // 授权关闭
    authColse: function (e) {
      this.isShowAuth = e
    },
    /**
     * 分享打开
     *
     */
    listenerActionSheet: function () {
      if (this.isLogin === false) {
        toLogin()
      } else {
        // #ifdef H5
        if (this.$wechat.isWeixin() === true) {
          this.weixinStatus = true
        }
        // #endif
        this.posters = true
      }
    },
    closePosters: function () {
      this.posters = false
    },
    //隐藏海报
    posterImageClose: function () {
      this.canvasStatus = false
    },
    //替换安全域名
    setDomain: function (url) {
      url = url ? url.toString() : ''
      //本地调试打开,生产请注销
      if (url.indexOf('https://') > -1) return url
      else return url.replace('http://', 'https://')
    },
    //获取海报产品图（解决跨域问题，只适用于小程序）
    downloadFilestoreImage: function () {
      let that = this
      uni.downloadFile({
        url: that.setDomain(that.productInfo.image),
        success: function (res) {
          that.storeImage = res.tempFilePath
        },
        fail: function () {
          return that.$util.Tips({
            title: '',
          })
          that.storeImage = ''
        },
      })
    },
    // 小程序关闭分享弹窗；
    goFriend: function () {
      this.posters = false
    },
    // 小程序二维码
    getQrcode() {
      let that = this
      let data = {
        pid: that.uid,
        id: that.id,
        path: 'pages/goods/goods_details/index',
      }
      getQrcode(data)
        .then((res) => {
          base64src(res.data.code, (res) => {
            that.PromotionCode = res
          })
        })
        .catch((err) => {
          that.errT = err
        })
    },
    // 生成二维码；
    make(uid) {
      let href =
        location.href.split('?')[0] + '?id=' + this.id + '&spread=' + this.uid
      uQRCode.make({
        canvasId: 'qrcode',
        text: href,
        size: this.qrcodeSize,
        margin: 10,
        success: (res) => {
          this.PromotionCode = res
        },
        complete: () => { },
        fail: (res) => {
          this.$util.Tips({
            title: '海报二维码生成失败！',
          })
        },
      })
    },
    getImageBase64: function (images) {
      let that = this
      imageBase64({
        url: images,
      }).then((res) => {
        that.imgTop = res.data.code
      })
    },
    /**
     * 获取产品分销二维码
     * @param function successFn 下载完成回调
     *
     */
    downloadFilePromotionCode: function (successFn) {
      let that = this
      getProductCode(that.id)
        .then((res) => {
          uni.downloadFile({
            url: that.setDomain(res.data.code),
            success: function (res) {
              that.$set(that, 'isDown', false)
              if (typeof successFn == 'function')
                successFn && successFn(res.tempFilePath)
              else that.$set(that, 'PromotionCode', res.tempFilePath)
            },
            fail: function () {
              that.$set(that, 'isDown', false)
              that.$set(that, 'PromotionCode', '')
            },
          })
        })
        .catch((err) => {
          that.$set(that, 'isDown', false)
          that.$set(that, 'PromotionCode', '')
        })
    },
    /**
     * 生成海报
     */
    goPoster: function () {
      let that = this
      uni.showLoading({
        title: '海报生成中',
        mask: true,
      })
      that.posters = false
      let arrImagesUrl = ''
      let arrImagesUrlTop = ''
      if (!that.PromotionCode) {
        uni.hideLoading()
        that.$util.Tips({
          title: that.errT,
        })
        return
      }
      setTimeout(() => {
        if (!that.imgTop) {
          uni.hideLoading()
          that.$util.Tips({
            title: '无法生成商品海报！',
          })
          return
        }
      }, 1000)
      uni.downloadFile({
        url: that.imgTop, //仅为示例，并非真实的资源
        success: (res) => {
          arrImagesUrlTop = res.tempFilePath
          let arrImages = [
            that.posterbackgd,
            arrImagesUrlTop,
            that.PromotionCode,
          ]
          let storeName = that.productInfo.storeName
          let price = that.productInfo.price
          setTimeout(() => {
            that.$util.PosterCanvas(
              arrImages,
              storeName,
              price,
              that.productInfo.otPrice,
              function (tempFilePath) {
                that.imagePath = tempFilePath
                that.canvasStatus = true
                uni.hideLoading()
              }
            )
          }, 500)
        },
      })
    },
    /*
     * 保存到手机相册
     */
    // #ifdef MP
    savePosterPath: function () {
      let that = this
      uni.getSetting({
        success(res) {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            uni.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
                uni.saveImageToPhotosAlbum({
                  filePath: that.imagePath,
                  success: function (res) {
                    that.posterImageClose()
                    that.$util.Tips({
                      title: '保存成功',
                      icon: 'success',
                    })
                  },
                  fail: function (res) {
                    that.$util.Tips({
                      title: '保存失败',
                    })
                  },
                })
              },
            })
          } else {
            uni.saveImageToPhotosAlbum({
              filePath: that.imagePath,
              success: function (res) {
                that.posterImageClose()
                that.$util.Tips({
                  title: '保存成功',
                  icon: 'success',
                })
              },
              fail: function (res) {
                that.$util.Tips({
                  title: '保存失败',
                })
              },
            })
          }
        },
      })
    },
    // #endif
    ShareInfo() {
      let data = this.productInfo
      let href = location.href
      if (this.$wechat.isWeixin()) {
        href =
          href.indexOf('?') === -1
            ? href + '?spread=' + this.uid
            : href + '&spread=' + this.uid

        let configAppMessage = {
          desc: data.storeInfo,
          title: data.storeName,
          link: href,
          imgUrl: data.image,
        }
        this.$wechat
          .wechatEvevt(
            [
              'updateAppMessageShareData',
              'updateTimelineShareData',
              'onMenuShareAppMessage',
              'onMenuShareTimeline',
            ],
            configAppMessage
          )
          .then((res) => {
            console.log(res)
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
  },
}
</script>

<style scoped lang="scss">
 
.product-con {
  height: 100%;

  .wrapper {
    margin-top: 0rpx;
    padding: 0;
    padding-top: 30rpx;
  }

  .wrapper-box {
    background: #fff;
    margin-top: -30rpx;
    position: relative;
    z-index: 9;
    border-radius: 30rpx 30rpx 0 0;

    .share {
      font-size: 30rpx;

      .num {
        font-size: 50rpx;
      }

      .ot-money {
        margin-left: 10rpx;
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9a9a9a;
        line-height: 42rpx;
        text-decoration: line-through;
      }
    }

    .share-icon {
      display: flex;
      align-items: center;
      width: 143rpx;
      height: 54rpx;
      background: #e5e5e5;
      border-radius: 27rpx;
      justify-content: center;
    }

    .introduce {
      margin: 18rpx 0 20rpx 0;
      color: #2b2b2b;
    }

    .label {
      font-size: 28rpx;

      color: #9a9a9a;
    }
  }
}

.activityName {
  line-height: 44rpx;
}

.userEvaluation {
  margin-top: 20rpx;
  background: #f9f9f9;
  border-radius: 20rpx;

  .title {
    font-size: 30rpx;

    font-weight: 500;
    color: #2b2b2b;
    background: none;
  }

  i {
    display: inline-block;
  }
}

.product-intro {
  background: #fff;

  .title {
    display: flex;
    justify-content: center;
    align-items: center;

    .sp {
      margin: 0 20rpx;
    }
  }

  .title-line {
    width: 94rpx;
    height: 1rpx;
    border: 2rpx solid #e5e5e5;
  }

  .product-remark-box {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2b2b2b;
    padding: 30rpx;

    .product-remark-header {}

    .product-remark-row {
      .product-remark-lable {
        margin-top: 20rpx;
        margin-bottom: 10rpx;
      }

      .product-remark-value {
        color: #9a9a9a;
        margin-left: 16rpx;
        display: block;
      }
    }
  }
}

.bntVideo {
  width: auto !important;

  .buy {
    border-radius: 50rpx !important;
  }
}

.attribute-box {
  background: #f9f9f9;
  border-radius: 20rpx;
  padding: 0rpx 30rpx;

  .attribute {
    height: 98rpx;
    background: none;
    border-bottom: 1px solid #e5e5e5;
    padding: 0;

    .line1 {
      display: flex;
      align-items: center;
      font-size: 28rpx;

      color: #666666;
      justify-content: flex-start;

      .icon-img {
        margin-right: 19rpx;
      }
    }

    .copy-right {
      display: flex;
      align-items: center;

      .icon-img {
        margin-right: 10rpx;
      }
    }
  }

  .attribute:last-child {
    border-bottom: 0;
  }
}

.chat-btn {
  background-color: antiquewhite !important;
}

.activity_pin {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  background: linear-gradient(90deg,
      rgba(233, 51, 35, 1) 0%,
      rgba(250, 101, 20, 1) 100%);
  opacity: 1;
  border-radius: 22rpx;
  padding: 0 15rpx;
  // margin-left: 19rpx;
}

.activity_miao {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 15rpx;
  background: linear-gradient(90deg,
      rgba(250, 102, 24, 1) 0%,
      rgba(254, 161, 15, 1) 100%);
  opacity: 1;
  border-radius: 22rpx;
  margin-left: 19rpx;
}

.iconfonts {
  color: #fff !important;
  font-size: 28rpx;
}

.activity_title {
  font-size: 24rpx;
  color: #fff;
}

.activity_kan {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 15rpx;
  background: linear-gradient(90deg,
      rgba(254, 159, 15, 1) 0%,
      rgba(254, 178, 15, 1) 100%);
  opacity: 1;
  border-radius: 22rpx;
  margin-left: 19rpx;
}

.mask {
  z-index: 300 !important;
}

.head-bar {
  background: #fff;
}

.generate-posters {
  width: 100%;
  height: 170rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 388;
  transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  border-top: 1rpx solid #eee;
}

.generate-posters.on {
  transform: translate3d(0, 0, 0);
}

.generate-posters .item {
  flex: 50%;
  text-align: center;
  font-size: 30rpx;
}

.generate-posters .item .iconfont {
  font-size: 80rpx;
  color: #5eae72;
}

.generate-posters .item .iconfont.icon-haibao {
  color: #5391f1;
}

.product-con .mask {
  z-index: 88;
}

.product-con .footer {
  padding: 0 25rpx 0 30rpx;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  height: 100rpx;
  background-color: #fff;
  z-index: 277;
  border-top: 1rpx solid #f0f0f0;
  text-align: center;
  justify-content: flex-start;
}

.product-con .footer .item {
  font-size: 20rpx;
  color: #363737;
  margin-right: 40rpx;

  .icon-img {
    width: 48rpx;
    height: 48rpx;
  }

  .footer-btn-cart {
    position: relative;

    .num {
      color: #fff;
      position: absolute;
      font-size: 18rpx;
      padding: 2rpx 8rpx 3rpx;
      border-radius: 200rpx;
      top: -10rpx;
      right: -10rpx;
    }
  }

}

.product-con .footer .item .iconfont {
  text-align: center;
  font-size: 40rpx;
}

.product-con .footer .item .iconfont.icon-shoucang1 {
  color: #f00;
}

// .product-con .footer .item .icon-gouwuche1 {
//   font-size: 40rpx;
//   position: relative;
// }

// .product-con .footer .item .icon-gouwuche1 .num {
//   color: #fff;
//   position: absolute;
//   font-size: 18rpx;
//   padding: 2rpx 8rpx 3rpx;
//   border-radius: 200rpx;
//   top: -10rpx;
//   right: -10rpx;
// }

.product-con .footer .bnt {
  width: 420rpx;
  height: 72rpx;
  margin-left: auto;
}

.product-con .footer .bnt .bnts {
  text-align: center;
  line-height: 72rpx;
  color: #fff;

  width: 210rpx;

  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  height: 72rpx;
}

.product-con .footer .bnt .joinCart {
  border-radius: 36rpx 0 0 36rpx;
  background: #3d403f;
  // background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
}

.product-con .footer .bnt .buy {
  border-radius: 0 36rpx 36rpx 0;
  background: $bg-gradient;
  color: $base-f;
  // background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
}

.product-con .store-info {
  margin-top: 20rpx;
  background-color: #fff;
}

.product-con .store-info .title {
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #282828;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1px solid #f5f5f5;
}

.product-con .store-info .info {
  padding: 0 30rpx;
  height: 126rpx;
}

.product-con .store-info .info .picTxt {
  width: 615rpx;
}

.product-con .store-info .info .picTxt .pictrue {
  width: 76rpx;
  height: 76rpx;
}

.product-con .store-info .info .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}

.product-con .store-info .info .picTxt .text {
  width: 522rpx;
}

.product-con .store-info .info .picTxt .text .name {
  font-size: 30rpx;
  color: #282828;
}

.product-con .store-info .info .picTxt .text .address {
  font-size: 24rpx;
  color: #666;
  margin-top: 3rpx;
}

.product-con .store-info .info .picTxt .text .address .iconfont {
  color: #707070;
  font-size: 18rpx;
  margin-left: 10rpx;
}

.product-con .store-info .info .picTxt .text .address .addressTxt {
  max-width: 480rpx;
}

.product-con .store-info .info .iconfont {
  font-size: 40rpx;
}

.product-con .superior {
  margin-top: 30rpx;
  // padding: 0 30rpx 30rpx 30rpx;
}

.product-con .superior .title {
  height: 98rpx;

  .title-line {
    width: 351rpx;
    height: 42rpx;
    position: absolute;
  }
}

.product-con .superior .title .titleTxt {
  margin: 0 10rpx;
  font-size: 30rpx;
  color: $base-color-1;
  // background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  // -webkit-background-clip: text;
  // -webkit-text-fill-color: transparent;
}

.product-con .superior .slider-banner {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.product-con .superior .slider-banner swiper {
  height: 100%;
  width: 100%;
}

.product-con .superior .slider-banner swiper-item {
  height: 100%;
}

.product-con .superior .slider-banner .list {
  width: 100%;
}

.product-con .superior .slider-banner .list .item {
  width: 198rpx;
  margin: 0 22rpx 30rpx 0;
  font-size: 26rpx;
}

.product-con .superior .slider-banner .list .item:nth-of-type(3n) {
  margin-right: 0;
}

.product-con .superior .slider-banner .list .item .pictrue {
  position: relative;
  width: 100%;
  height: 198rpx;
}

.product-con .superior .slider-banner .list .item .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}

.product-con .superior .slider-banner .list .item .name {
  color: #282828;
  margin-top: 12rpx;
}

.product-con .superior .slider-banner .swiper-pagination-bullet {
  background-color: #999;
}

.product-con .superior .slider-banner .swiper-pagination-bullet-active {
  background-color: $theme-color;
}

button {
  padding: 0;
  margin: 0;
  line-height: normal;
  background-color: #fff;
}

button::after {
  border: 0;
}

action-sheet-item {
  padding: 0;
  height: 240rpx;
  align-items: center;
  display: flex;
}

.contact {
  font-size: 16px;
  width: 50%;
  background-color: #fff;
  padding: 8rpx 0;
  border-radius: 0;
  margin: 0;
  line-height: 2;
}

.contact::after {
  border: none;
}

.action-sheet {
  font-size: 17px;
  line-height: 1.8;
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
  padding: 25rpx 0;
}

.canvas {
  position: fixed;
  z-index: -5;
  opacity: 0;
}

.poster-pop {
  position: fixed;
  width: 450rpx;
  height: 714rpx;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -432rpx;
  z-index: 399;
}

.poster-pop image {
  width: 100%;
  height: 100%;
  display: block;
}

.poster-pop .close {
  width: 46rpx;
  height: 75rpx;
  position: fixed;
  right: 0;
  top: -73rpx;
  display: block;
}

.poster-pop .save-poster {
  background-color: #df2d0a;
  font-size: ：22rpx;
  color: #fff;
  text-align: center;
  height: 76rpx;
  line-height: 76rpx;
  width: 100%;
}

.poster-pop .keep {
  color: #fff;
  text-align: center;
  font-size: 25rpx;
  margin-top: 10rpx;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9;
}

.pro-wrapper .iconn {
  background-image: url('');
  width: 100rpx;
  height: 100rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}

.pro-wrapper .iconn.iconn1 {
  background-image: url('');
}

.pictrue_log {
  width: 80upx;
  height: 40upx;
  border-radius: 10upx 0 12upx 0;
  line-height: 40upx;
  font-size: 24upx;
}

.pictrue_log_class {
  z-index: 3;
  background: -webkit-gradient(linear,
      left top,
      right top,
      from(rgba(246, 122, 56, 1)),
      to(rgba(241, 27, 9, 1)));
  background: linear-gradient(90deg,
      rgba(246, 122, 56, 1) 0%,
      rgba(241, 27, 9, 1) 100%);
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  text-align: center;
}

.navbar .header {
  // height: 96rpx;
  font-size: 30rpx;
  // background: #EDEDED;
  // background-color: #fff;
  /* #ifdef MP */
  padding-right: 95rpx;
  /* #endif */
  width: 250px;
  justify-content: space-between;
}

.icon-xiangzuo {
  /* #ifdef H5 */
  top: 20rpx !important;
  /* #endif */
}

.navbar .header {

  .item {
    position: relative;
    // margin: 0 25rpx;
    // margin-right: 126rpx;
    color: #666;
  }

  .on {
    color: $base-color-1
  }

  .item:last-child {
    margin-right: 0;
  }
}

.navbar .header .item.on:before {
  position: absolute;
  width: 60rpx;
  height: 5rpx;
  background-repeat: no-repeat;
  content: '';
  background-image: linear-gradient(to right, #ff3366 0%, #ff6533 100%);
  bottom: -10rpx;
  left: 50%;
  margin-left: -28rpx;
}

.navbar {
  position: fixed;
  background: #EDEDED;
  // background-color: #fff;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
}

.navbar .navbarH {
  position: relative;
  height: 100%;
}

.navbar .navbarH .navbarCon {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
}

.icon-xiangzuo {
  color: #000;
  position: fixed;
  font-size: 36rpx;
  width: 100rpx;
  height: 56rpx;
  line-height: 54rpx;
  z-index: 1000;
  left: -5rpx;
}

.share-box {
  z-index: 1000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  image {
    width: 100%;
    height: 100%;
  }
}
</style>
